<template>
  <div class="search">
    <!-- 头部导航 -->
    <div class="Navigation">
      <div
        class="left iconfont icon-arrow-left-bold"
        @click="$router.go(-1)"
      ></div>
      <input
        type="text"
        class="center"
        v-model="value"
        placeholder="搜索歌曲、歌手"
      />
      <div
        v-show="value"
        class="right iconfont icon-close"
        @click="value = ''"
      ></div>
    </div>
    <!-- 进来时显示 -->
    <div class="card" v-show="!value">
      <h3>热门搜索</h3>
      <div class="tags">
        <div
          class="tag"
          v-for="(item, index) in hotLists"
          :key="index"
          @click="value = item.first"
        >
          {{ item.first }}
        </div>
      </div>
      <div class="history">
        <h3>历史搜索</h3>
        <div class="right iconfont icon-shanchu"></div>
      </div>
      <div class="history">
        <h3 class="result">周杰伦</h3>
        <div class="right iconfont icon-close"></div>
      </div>
      <div class="history">
        <h3 class="result">天高地厚</h3>
        <div class="right iconfont icon-close"></div>
      </div>
    </div>
    <!-- 搜索时显示 -->
    <div class="text" v-show="value">
      <div v-if="lists">
        <div
          class="sing"
          v-for="(item, index) in lists.songs"
          :key="index"
          @click="setId(item.id)"
        >
          <i class="iconfont icon-search"></i>
          <div class="songName">{{ item.name }} {{ item.artists[0].name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearch, getSearchHot } from "@/api/search";
import { getSongDetail } from "@/api/music";
export default {
  data() {
    return {
      value: "",
      lists: {},
      hotLists: [],
    };
  },
  methods: {
    async getSearchHot() {
      const {
        result: { hots },
      } = await getSearchHot();
      console.log(hots);
      this.hotLists = hots;
    },
    async getSearch() {
      const { result } = await getSearch({ keywords: this.value, type: 1 });
      console.log(result);
      this.lists = result;
      console.log(1);
    },
    async setId(id) {
      console.log(id);
      this.$emit("get-player-id", id);
      const { songs } = await getSongDetail({ ids: id });
      console.log("播放", songs);
      this.$emit("set-cloudList-id", songs[0]);
    },
  },
  created() {
    this.getSearchHot();
  },
  watch: {
    value(newValue) {
      if (newValue) {
        this.getSearch();
      }
    },
  },
};
</script>

<style lang="less" scoped>
input::-webkit-input-placeholder {
  color: #df8d86;
}
input::-moz-placeholder {
  color: #df8d86;
}
input:-moz-placeholder {
  color: #df8d86;
}
input:-ms-input-placeholder {
  color: #df8d86;
}
.search {
  position: relative;
  background: url("../assets/bg.webp") no-repeat;
  background-size: 100%;
  height: 100vh;
  .Navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: #191515;
    height: 5.5vh;
    line-height: 39px;
    display: flex;
    text-align: center;

    .left,
    .right {
      flex: 0 0 40px;
      font-size: 18px;
    }
    .center {
      display: block;
      width: 80%;
      padding-top: 8px;
      margin-bottom: 8px;
      background-color: transparent;
      font-size: 14px;
      border: 1px solid transparent;
      border-bottom: 1px solid #df8d86;
    }
  }
  .card {
    position: absolute;
    top: 5.5vh;
    padding: 18px;
    width: 100%;
    height: 94.5vh;
    h3 {
      margin-left: 3px;
      font-size: 14px;
      color: #3f3737;
      margin-bottom: 10px;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 12px;
      .tag {
        padding: 5px;
        border: 1px solid #4d5353;
        border-radius: 8px;
        margin-right: 6px;
        margin-bottom: 6px;
        color: #202323;
        height: 25px;
        line-height: 14px;
        font-size: 14px;
      }
    }
    .history {
      display: flex;
      justify-content: space-between;
      h3 {
        margin-bottom: 17px;
      }
      .right {
        margin-top: 3px;
      }
      .result {
        color: #212727;
        font-weight: 500;
      }
    }
  }
  .text {
    position: absolute;
    top: 5.5vh;
    width: 100%;
    height: 94.5vh;
    padding: 18px;
    overflow-x: hidden;
    .sing {
      display: flex;
      padding-bottom: 5px;
      i {
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
      }
      .songName {
        flex: 1;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
      }
    }
  }
}
</style>
